<template>
  <!-- 个人 实名认证 -->
  <view>
    <baseHead :title="title" :showReturn="true" :right="false"></baseHead>
    <!-- 	<u-alert title="认证中" type="primary" v-if="form.State === 0"></u-alert>
		<u-alert title="认证成功" type="primary" v-if="form.State === 1"></u-alert>
		<u-alert :title="rzTitle" type="primary" v-if="form.State === 2"></u-alert> -->
    <view class="box">
      <view class="content">
        <u-form :model="form" ref="uForm" style="padding: 10rpx 40rpx">
          <u-form-item
            label="真实姓名"
            label-width="100"
            required
            style="border-bottom: 1rpx solid #e7e7e8"
          >
            <view style="width: 100%">
              <u--input
                placeholder="请输入真实姓名"
                border="none"
                :disabled="form.State === 1 || form.State === 0 ? true : false"
                v-model="form.SureName"
                input-align="right"
                style="background-color: #fff"
              >
              </u--input>
            </view>
          </u-form-item>
          <u-form-item
            label="证件类型"
            label-width="100"
            required
            prop="CardType"
            style="border-bottom: 1rpx solid #e7e7e8"
          >
            <!-- @click="showzj" -->
            <view
              style="
                width: 100%;
                display: flex;
                justify-content: flex-end;
                color: #303133;
              "
            >
              <text v-show="lxtextda">
                {{ lxtextda }}
              </text>
              <text style="color: rgb(192 196 204)" v-show="!lxtextda">
                请选择证件类型
              </text>
              <!-- <u-icon name="arrow-right"></u-icon> -->
            </view>
          </u-form-item>
          <u-form-item
            label="证件证号"
            label-width="100"
            required
            style="border-bottom: 1rpx solid #e7e7e8"
          >
            <view style="width: 100%">
              <u--input
                placeholder="请填写证件号码"
                :disabled="form.State === 1 || form.State === 0 ? true : false"
                border="none"
                v-model="form.CardNumber"
                input-align="right"
                style="background-color: #fff"
              >
              </u--input>
            </view>
          </u-form-item>
          <u-form-item
            label="证件有效期"
            label-width="100"
            required
            style="border-bottom: 1rpx solid #e7e7e8"
          >
            <view style="width: 100%; display: flex; justify-content: flex-end">
              <text @click="linJob(1)">
                <text v-if="form.CardValidStartDate">{{
                  form.CardValidStartDate | formatDateYM
                }}</text>
                <text v-else>证件开始日期</text>
              </text>
              <view class="connect">-</view
              ><text @click="linJob(2)">
                <text v-if="form.CardValidEndDate">{{
                  form.CardValidEndDate | formatDateYM
                }}</text>
                <text v-else>证件结束日期</text>
              </text>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </u-form-item>

          <u-form-item label="上传证件照" label-width="100" required>
            <view style="width: 100%; display: flex; justify-content: end">
            </view>
          </u-form-item>
        </u-form>

        <view
          style="padding: 10rpx 40rpx; display: flex; justify-content: center"
        >
          <view style="padding-bottom: 161rpx">
            <view class="pre-box">
              <view class="pre-item">
                <u-upload
                  @afterRead="success1"
                  :disabled="form.State == 1"
                  width="350"
                  height="214"
                >
                  <view v-show="!form.PhotoFront" class="preitemimage">
                    <u-icon color="#d3d4d6" size="26" name="plus"></u-icon>
                  </view>
                  <view v-show="form.PhotoFront" class="preitemimage">
                    <image
                      :src="URL + form.PhotoFront"
                      style="width: 100%; height: 100%"
                    ></image>
                  </view>
                </u-upload>
              </view>

              <view style="text-align: center; padding-top: 10rpx">
                <text>正面</text>
              </view>
            </view>
            <view class="pre-box">
              <view class="pre-item">
                <u-upload
                  @afterRead="success2"
                  :disabled="form.State == 1"
                  width="350"
                  height="214"
                >
                  <view v-show="!form.PhotoBack" class="preitemimage">
                    <u-icon color="#d3d4d6" size="26" name="plus"></u-icon>
                  </view>
                  <view v-show="form.PhotoBack" class="preitemimage">
                    <image
                      :src="URL + form.PhotoBack"
                      style="width: 100%; height: 100%"
                    ></image>
                  </view>
                </u-upload>
              </view>

              <view style="text-align: center; padding-top: 10rpx">
                <text>反面</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="btnbox" @click="clicktijiao">
        <view class="btn">提交</view>
      </view>
    </view>
    <u-datetime-picker
      :show="show1"
      mode="year-month"
      title="证件开始日期"
      closeOnClickOverlay
      @close="show1 = false"
      @cancel="show1 = false"
      @confirm="changeDirthDate"
      :minDate="minDate"
      :maxDate="maxDate"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="show2"
      mode="year-month"
      title="证件结束日期"
      closeOnClickOverlay
      @close="show2 = false"
      @cancel="show2 = false"
      @confirm="changeDirthDate"
      :minDate="endMinDate"
      :maxDate="endMaxDate"
    ></u-datetime-picker>
    <u-action-sheet
      :actions="list"
      :show="show"
      @select="selectClick"
      @close="show = false"
    >
    </u-action-sheet>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate();

export default {
  data() {
    return {
      // 图片访问路径
      URL: this.$config.domain.staticUrl,
      yuanglailist: "",
      title: "实名认证",
      rzTitle: "",

      form: {
        SureName: "", //输入框的值
        CardType: "0", //证件类型
        CardNumber: "", //证件证号的值
        CardValidStartDate: "",
        CardValidEndDate: "",
        PhotoBack: null,
        PhotoFront: null,
        State: null,
        CheckTime: null, //时间
        CreatedTime: null,
      },

      show1: false, //日期范围显示
      show2: false, //日期范围显示
      show: false,

      // 身份证 = 0，港澳通行证 = 1，护照 = 2
      list: [
        {
          id: "0",
          name: "身份证",
          color: "#1563FA",
        },
        {
          id: "1",
          name: "港澳居民来往内地通行证",
        },
        {
          id: "2",
          name: "台湾居民来往大陆通行证",
        },
      ],
      disableshow: false,
      minDate: null,
      maxDate: null,
      endMinDate: null,
      endMaxDate: null,
    };
  },
  components: {
    baseHead,
  },
  onShow() {
    this.cxrzxx();
  },
  // 监听页面初次渲染完成
  onReady() {},
  // 计算属性
  computed: {
    lxtextda() {
      let atst = "";
      this.list.forEach((item, inedx) => {
        if (this.form.CardType == inedx) {
          // console.log(item);
          atst = item.name;
        }
      });
      return atst;
    },

    show1data() {
      let dd = false;
      if (this.form.State === 0 || this.form.State === 1) {
        dd = false;
      } else {
        dd = true;
      }
      return dd;
    },
  },
  // 计算方法
  methods: {
    showzj() {
      this.show = true;
    },
    cxrzxx() {
      this.$http.core.accountgetAudit().then((res) => {
        if (res.Success) {
          // console.log(res.Result);

          this.yuanglailist = true;
          this.form = res.Result;
          if (this.form.State == 2) {
            this.rzTitle = "认证失败：" + this.form.CheckReason;
          }
        }
      });
    },
    selectClick(item) {
      this.show = !this.show;
      this.form.CardType = item.id;
    },

    linJob(type) {
      this.dateType = type;
      let beginTime = new Date(
        this.form.CardValidStartDate.replace(/-/g, "/")
      ).getTime();
      console.log(beginTime);
      if (type == 1) {
        if (this.show1data) {
          this.show1 = true;
          this.minDate = -500008000000;
          this.maxDate = Number(new Date());
        }
      } else {
        console.log("2262");
        console.log(this.show1data);

        if (this.form.CardValidStartDate) {
          console.log("666");
          this.show2 = true;
          this.endMinDate = Number(beginTime);
          this.endMaxDate = Number(new Date() * 2);
        } else {
          this.$util.toast("请先选择证件开始日期");
        }
      }
    },
    changeDirthDate(e) {
      const timeFormat = uni.$u.timeFormat;
      let ds = timeFormat(e.value, "yyyy-mm-dd");

      if (this.dateType == 1) {
        //开始
        if (this.form.CardValidStartDate) {
          if (
            this.form.CardValidEndDate != "" &&
            ds > this.form.CardValidEndDate
          ) {
            this.$util.toast("开始时间不能高于结束时间");
            return;
          }
        }
        this.form.CardValidStartDate = ds;
      } else {
        if (this.form.CardValidEndDate) {
          if (
            this.form.CardValidEndDate != "" &&
            ds < this.form.CardValidStartDate
          ) {
            this.$util.toast("开始时间不能低于结束时间");
            return;
          }
        }
        this.form.CardValidEndDate = ds;
      }
      this.show1 = false;
      this.show2 = false;
    },

    // 上传成功
    success1(file, lists, name) {
      var that = this;
      let tempFilePaths = file.file;
      let obj = {
        src: tempFilePaths.url,
      };

      that.$util.AuploadFile(obj).then((res) => {
        if (res.Success) {
          uni.$u.toast("上传成功");

          console.log(res.Result.Path);
          that.form.PhotoFront = res.Result.Path;
        }
      });
    },
    // 上传成功
    success2(file, lists, name) {
      var that = this;
      let tempFilePaths = file.file;
      let obj = {
        src: tempFilePaths.url,
      };
      that.$util.AuploadFile(obj).then((res) => {
        if (res.Success) {
          uni.$u.toast("上传成功");
          that.form.PhotoBack = res.Result.Path;
        }
      });
    },
    clicktijiao() {
      if (this.form.State === 1) {
        this.$util.toast("已认证成功");
        return;
      }

      if (!this.form.SureName) {
        this.$util.toast("请输入姓名");
        return;
      }

      if (this.form.SureName) {
        const realnameReg = /^[\u4E00-\u9FA5]{2,4}$/;
        if (!realnameReg.test(this.form.SureName)) {
          this.$util.toast("请输入2-4个汉字");
          return;
        }
      }

      if (!this.form.CardNumber) {
        this.$util.toast("请输入证件证号");
        return;
      }

      if (this.form.CardType === "0") {
        var arrExp = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //加权因子
        var arrValid = [1, 0, "X", 9, 8, 7, 6, 5, 4, 3, 2]; //校验码
        if (/^\d{17}\d|x$/i.test(this.form.CardNumber)) {
          var sum = 0,
            idx;
          for (var i = 0; i < this.form.CardNumber.length - 1; i++) {
            // 对前17位数字与权值乘积求和
            sum += parseInt(this.form.CardNumber.substr(i, 1), 10) * arrExp[i];
          }
          // 计算模（固定算法）
          idx = sum % 11;
          // 检验第18为是否与校验码相等
          if (
            arrValid[idx] == this.form.CardNumber.substr(17, 1).toUpperCase()
          ) {
            // callback()
          } else {
            uni.$u.toast("身份证格式有误");
            return;
          }
        } else {
          uni.$u.toast("身份证格式有误");
          return;
        }
      }

      if (!this.form.CardValidStartDate) {
        this.$util.toast("请选择证件有效期");
        return;
      }
      if (!this.form.CardValidEndDate) {
        this.$util.toast("请选择证件有效期");
        return;
      }
      if (!this.form.PhotoBack) {
        this.$util.toast("请上传证件照片");
        return;
      }
      if (!this.form.PhotoFront) {
        this.$util.toast("请上传证件照片");
        return;
      }

      console.log("验证通过");

      let objstring = JSON.stringify(this.form);
      let dax = JSON.parse(objstring);

      if (this.yuanglailist) {
        // 修改
        let isdg = dax.Id;
        this.$http.core.personupdate(dax, isdg).then((res) => {
          console.log(res);
          this.$util.toast(res.Message);
          setTimeout((res) => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        });
      } else {
        // 添加
        // return
        if (dax.PhotoBack && dax.PhotoFront) {
          this.$http.core.person_add(dax).then((res) => {
            this.$util.toast(res.Message);
            setTimeout((res) => {
              uni.navigateBack({
                delta: 1,
              });
            }, 1000);
          });
        } else {
          this.$util.toast("请上传图片");
        }
      }
    },
  },
};
</script>
<style>
</style>
<style scoped lang="scss">
.alert {
  .alert-box {
    text-align: center;
    padding: 48rpx 0 39rpx;
    background-color: #fff;

    .image {
      width: 202rpx;
      height: 202rpx;
    }

    .alert-text {
      font-size: 30rpx;
      font-weight: 400;
      color: #000000;
    }

    .alert-time {
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
      padding: 7rpx 0;
    }
  }

  .alert-content {
    .alert-con-box {
      display: flex;
      justify-content: space-between;
      padding: 39rpx 30rpx;
      background-color: #fff;
      // border-bottom: 1rpx solid #999;
      margin-bottom: 1rpx;

      .con-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #000000;
      }

      .con-name {
        font-size: 30rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }

  .alert-content1 {
    background-color: #fff;
    height: calc(100vh - var(--status-bar-height));

    .alert-box1 {
      padding: 39rpx 30rpx;
      text-align: center;

      .image {
        width: 202rpx;
        height: 202rpx;
      }

      .alert-text {
        font-size: 30rpx;
        font-weight: 400;
        color: #000000;
      }

      .alert-time {
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        padding: 7rpx 0;
      }
    }

    .btn {
      margin: 142rpx 230rpx;
      background: #3476fe;
      border-radius: 49rpx;
      opacity: 1;
      padding: 23rpx 85rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
    }
  }
}

.box {
  .content {
    margin: 20rpx 30rpx;
    background: #ffffff;
    border-radius: 20rpx;

    .bodycontent {
      display: flex;
      justify-content: space-between;

      align-items: center;
      padding: 30rpx 40rpx;
    }
  }
  .btnbox {
    background: #3476fe;
    border-radius: 10rpx;
    opacity: 1;
    margin: 59rpx 30rpx;
    text-align: center;
    .btn {
      font-size: 30rpx;
      font-weight: bold;
      color: #ffffff;
      padding: 24rpx 282rpx;
    }
  }
}

.pre-box {
  margin-top: 20rpx;
  background: #ffffff;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 10rpx;
  padding: 10rpx;

  .preitemimage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350rpx;
    height: 214rpx;
    border-radius: 10rpx;
    background-color: #f4f5f7;
  }
}
</style>